<!--
 * @Author: your name
 * @Date: 2021-12-22 16:33:02
 * @LastEditTime: 2022-01-06 19:53:18
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \am-dashboard\src\pages\government\components\Bottom3.vue
-->
<template>
  <div class="div1">
    <div class="div2">
      <div class="div2-1"></div>
      <p style="font-size: 15px; color: #338fcc; padding: 4px 10px">
        <strong>地址：</strong>广西省柳州市
      </p>
      <p style="font-size: 15px; color: #338fcc; padding: 4px 10px">
        <strong>相关设备：</strong>空气质量监测测试一号设备
      </p>
      <p style="font-size: 15px; color: #338fcc; padding: 4px 10px">
        <strong>设备信息：</strong>暂无
      </p>
      <p style="font-size: 15px; color: #338fcc; padding: 4px 10px">
        <strong>设备状态：</strong>正常工作
      </p>
      <p style="font-size: 15px; color: #338fcc; padding: 4px 10px">
        <strong>设备经度：</strong>109.44626
      </p>
      <p style="font-size: 15px; color: #338fcc; padding: 4px 10px">
        <strong>设备纬度：</strong>24.33941
      </p>
    </div>
    <div class="div3">
      <div class="div3-1">
        <p style="font-size: 15px; color: #338fcc; padding: 4px 10px">
          <strong>地址：</strong>广西省南宁市
        </p>
        <p style="font-size: 15px; color: #338fcc; padding: 4px 10px">
          <strong>相关设备：</strong>水资源质量监测测试五号设备
        </p>
        <p style="font-size: 15px; color: #338fcc; padding: 4px 10px">
          <strong>设备信息：</strong>摄像头损坏
        </p>
        <p style="font-size: 15px; color: #338fcc; padding: 4px 10px">
          <strong>设备状态：</strong>待维修
        </p>
        <p style="font-size: 15px; color: #338fcc; padding: 4px 10px">
          <strong>设备经度：</strong>108.27331
        </p>
        <p style="font-size: 15px; color: #338fcc; padding: 4px 10px">
          <strong>设备纬度：</strong>22.78121
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    //方法
  },
  mounted() {},
};
</script>

<style scoped>
* {
  font-family: "等线";
  font-size: 16.5px;
}
.div1 {
  display: flex;
  padding-bottom: 40px;

  width: 380px;

  height: 155px;

  overflow: hidden;

  margin: auto;

  position: relative;

  /* border: 2px solid orange; */
}

@keyframes anis {
  0% {
    transform: translateX(400px);
  }

  28% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(-1200px);
  }
}

img {
  position: absolute;
}

.div2 {
  animation: anis 10s linear infinite;
  margin-right: 380px;
}
.div2-1 {
  width: 380px;
}

.div3 {
  animation: anis 10s linear infinite;
  margin-right: -500px;
}
.div3-1 {
  width: 380px;
}

.div2:hover {
  animation-play-state: paused;
}
.div3:hover {
  animation-play-state: paused;
}
</style>